
<template>
  <div
    class="profile-card"
    :style="{
      background: `url(${backgroundImage}) no-repeat center / cover`,
      width: width,
      height: height
    }"
  >
    <div class="avatar">
      <img :src="avatar" :alt="name" />
    </div>
    <p class="signature">{{ signature }}</p>
    <p class="name">{{ name }}</p>
    <a-select
      class="class-select"
      :placeholder="classPlaceholder"
      v-model="selectedClass"
    >
      <a-select-option
        v-for="option in classOptions"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ProfileCard',
  props: {
    avatar: {
      type: String,
      default: ''
    },
    signature: {
      type: String,
      default: '中午好！ 美好的一天从读书开始'
    },
    name: {
      type: String,
      default: '秀才不是才'
    },
    classOptions: {
      type: Array,
      default: () => [
        { value: '1', label: '2024级1班' },
        { value: '2', label: '2024级2班' },
        { value: '3', label: '2024级3班' }
      ]
    },
    classPlaceholder: {
      type: String,
      default: '请选择班级'
    },
    backgroundImage: {
      type: String,
      default: '',
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '452.25px'
    }
  },
  setup(props) {
    const selectedClass = ref(props.classOptions[0]?.value || '1')
    return {
      selectedClass
    }
  }
}
</script>

<style scoped lang="less">
.profile-card {
  font-family: PingFang-SC Regular;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: cover;

  .avatar {
    margin: 20px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .signature {
    font-size: 20px;
    font-weight: 500;
    line-height: 28.96px;
    color: rgba(1, 185, 157, 1);
    text-align: center;
  }
  .name {
    font-size: 32px;
    font-weight: 700;
    line-height: 46.34px;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }
  .class-select {
    margin-top: 20px;
    width: 200px;
  }
}
</style>
